<template>
    <el-dialog
        v-if="is_assets"
        v-model="is_assets"
        :close-on-click-modal='false'
        :close-on-press-escape='false'
        :show-close='type === 1'
        @close='close'
        custom-class="assets"
        destroy-on-close
    >
        <template #title>
            <div class="dialog_title">
                <p class="title" v-if="type === 1">{{title}}</p>
                <div v-else class="register">
                    <div>
                        <p class="title" v-if="type === 2">资产登记</p>
                        <p class="title" v-else>资产编辑</p>
                        <el-select v-model="form.company_id">
                            <el-option
                                v-for="item in unit_list"
                                :key="item.company_id"
                                :label="item.company_name"
                                :value="item.company_id"
                            ></el-option>
                        </el-select>
                    </div>
                    <div v-if="type === 2">
                        <el-button @click='close'>取消登记</el-button>
                        <el-button type="primary" @click="add_assets(1)">确认登记</el-button>
                    </div>
                    <div v-else>
                        <el-button @click="del_assets">删除资产</el-button>
                        <el-button @click='close'>取消编辑</el-button>
                        <el-button type="primary" @click="add_assets(2)">确认编辑</el-button>
                    </div>
                </div>
            </div>
        </template>
        <el-form :model="form" label-position='right' size='small' label-width="100px" :rules="rules" ref="rule_form">
            <div class="form_box">
                <el-form-item label="资产编号">
                    <el-input v-model="form.asset_number" :disabled='type === 1'></el-input>
                </el-form-item>
                <el-form-item label="资产类别" prop="category_id">
                    <el-cascader
                        :disabled='type === 1'
                        v-model="form.category_id"
                        :options="class_list"
                        :props='props'
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="资产名称" prop="asset_name">
                    <el-input v-model="form.asset_name" :disabled='type === 1'></el-input>
                </el-form-item>
                <el-form-item label="数量" prop="num">
                    <el-input v-model="form.num" :disabled='type === 1'></el-input>
                </el-form-item>
                <el-form-item label="单价" prop="price">
                    <el-input v-model="form.price" :disabled='type === 1'></el-input>
                </el-form-item>
                <el-form-item label="计量单位">
                    <el-input v-model="form.unit" :disabled='type === 1'></el-input>
                </el-form-item>
                <el-form-item label="品牌">
                    <el-input v-model="form.brand" :disabled='type === 1'></el-input>
                </el-form-item>
                <el-form-item label="生产日期" prop="produce">
                    <el-date-picker
                        :disabled='type === 1'
                        v-model="form.produce"
                        type="date"
                        :clearable='false'
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="购置时间" prop="buy">
                    <el-date-picker
                        :disabled='type === 1'
                        v-model="form.buy"
                        type="date"
                        :clearable='false'
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="保修截止">
                    <el-date-picker
                        :disabled='type === 1'
                        v-model="form.warranty"
                        type="date"
                        :clearable='false'
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="报废时间">
                    <el-date-picker
                        :disabled='type === 1'
                        v-model="form.scrapped"
                        type="date"
                        :clearable='false'
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="是否折旧">
                    <el-select v-model="form.is_depreciation" :disabled='type === 1'>
                        <el-option :value="1" label="是"></el-option>
                        <el-option :value="0" label="否"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="折旧年限(月)">
                    <el-input v-model="form.depreciation_num" :disabled='type === 1'></el-input>
                </el-form-item>
                <el-form-item label="联系商家">
                    <el-input v-model="form.contact_business" :disabled='type === 1'></el-input>
                </el-form-item>
                <el-form-item label="联系人">
                    <el-input v-model="form.contact_persion" :disabled='type === 1'></el-input>
                </el-form-item>
                <el-form-item v-if="type === 2" label="联系方式">
                    <el-input v-model="form.contact_tel"></el-input>
                </el-form-item>
                <el-form-item v-if="type === 2" label="资产状态">
                    <el-select v-model="form.is_status">
                        <el-option
                            v-for="item in status"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </div>
            <el-form-item label="备注">
                <el-input type="textarea" :rows="4" v-model="form.remark" :disabled='type === 1'></el-input>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script lang="js">
import { defineComponent, reactive, toRefs, onUpdated, ref } from 'vue'
import { ElMessageBox } from "element-plus";
export default defineComponent({
    props: {
        type: {
            type: Number,
            default: 1  // 1为详情 2为资产登记  3为编辑资产
        },
        status: {
            type: Array,
            default: []
        },
        is_assets: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: '资产详情'
        },
        info: {
            type: Object,
            default: {}
        },
        class_list: {
            type: Array,
            default: []
        },
        unit_list: {
            type: Array,
            default: []
        }
    },
    setup(props, { emit }) {
        let state = reactive({
            form: {},
            props: {
                children: 'down',
                value: 'category_id',
                label: 'category_name'
            },
            rules: {
                category_id: [{required: true, message: '请选择资产类别', trigger: 'change'}],
                asset_name: [{required: true, message: '请输入资产名称', trigger: 'blur'}],
                num: [{required: true, message: '请输入数量', trigger: 'blur'}],
                price: [{required: true, message: '请输入单价', trigger: 'blur'}],
                produce: [{type: 'date', required: true, message: '请选择生产日期', trigger: 'change'}],
                buy: [{type: 'date', required: true, message: '请选择购置日期', trigger: 'change'}]
            }
        })

        onUpdated(() => {
            state.form = props.info
            state.form.produce = Number(props.info.produce_time + '000')
            state.form.buy = Number(props.info.buy_time  + '000')
            state.form.warranty = Number(props.info.warranty_end_time + '000')
            state.form.scrapped = Number(props.info.scrapped_time + '000')
        })

        const close = () => {
            emit('close')
        }
        // 资产登记
        let rule_form = ref(null)
        const add_assets = type => {
            rule_form.value.validate(valid => {
                if (valid) {
                    state.form.category_id = state.form.category_id[1] ? state.form.category_id[1] : state.form.category_id
                    state.form.buy_time = typeof state.form.buy === 'number' ? state.form.buy / 1000 :  (state.form.buy.getTime() / 1000).toFixed()
                    state.form.scrapped_time = typeof state.form.scrapped === 'number' ? state.form.scrapped / 1000 : (state.form.scrapped.getTime() / 1000).toFixed()
                    state.form.warranty_end_time = typeof state.form.warranty === 'number' ? state.form.warranty / 1000 : (state.form.warranty.getTime() / 1000).toFixed()
                    state.form.produce_time = typeof state.form.produce === 'number' ? state.form.produce / 1000 : (state.form.produce.getTime() / 1000).toFixed()
                    if(type === 1) {
                        emit('add_assets', state.form)
                    } else {
                        emit('edit_assets', state.form)
                    }
                }
            })
        }
        // 删除资产
        const del_assets = () => {
            ElMessageBox.confirm('确认删除此资产？', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                emit('del_assets', props.info.id)
            })
        }

        return {
            ...toRefs(state),
            close,
            add_assets,
            rule_form,
            del_assets
        }
    }
})

</script>

<style lang="scss" scoped>
.dialog_title{
    border-bottom: 1px solid #999;
    padding-bottom: 10px;
    .title{
        font-size: 16px;
        font-weight: bold;
    }
    .register{
        display: flex;
        justify-content: space-between;
        >div{
            display: flex;
            .title{
                line-height: 40px;
                margin-right: 20px;
            }
        }
    }
}
</style>